<template>
	<view>
		<u-navbar title="粉丝列表" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="main">
			<view class="focusList" v-if="Fans.length > 0">
				<view v-for="item, index in Fans" class="item">
					<view class="leftBox" @click="goOther">
						<u--image height="3rem" width="3rem" shape="circle" :src="item.avatar"></u--image>
						<span>{{ item.nickName }}</span>
						<u-icon class="icon" v-if="item.sex == '女生'" name="woman" color="#ff579e" size="1.2rem">
						</u-icon>
						<u-icon class="icon" v-if="item.sex == '男生'" name="man" color="#3785fd" size="1.2rem">
						</u-icon>
					</view>
					<view class="rightBox">
						<u-button v-if="item.isFollow" @click="press(index)" type="primary" color="#ccc" text="互相关注"
							shape="circle"></u-button>
						<u-button v-else @click="press(index)" type="primary" text="关注" shape="circle"></u-button>
					</view>

				</view>

			</view>
			<u-empty v-else mode="list" text="暂无粉丝" marginTop="50%">

			</u-empty>
		</view>
	</view>
</template>

<script>
import _ from 'lodash'
import {
	mapGetters
} from 'vuex'
export default {
	data() {

		return {

		}
	},
	computed: {
		...mapGetters(['Fans'])
	},
	methods: {
		press: _.debounce(function (index) {

			let data = this.Fans[index].isFollow
			if (!data) {
				//关注用户
				this.$store.dispatch('getFllowUser', index)
			} else {
				//取消关注用户
				this.$store.dispatch('unFllowUser', index)
			}

		}, 800),
		goOther() {
			console.log(this.Fans)
			this.$store.dispatch('getOtherInfo', this.Fans[0].userId)
			this.$store.dispatch('getOtherInfoBook', this.Fans[0].userId)
			this.$Router.push({
				name: 'other'
			})
		},

	}
}
</script>

<style lang="scss" scoped>
.focusList {
	margin: 1rem 1rem 0rem 1rem;

	.item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		padding-bottom: 0.5rem;
		margin-bottom: 1rem;

		.leftBox {

			display: flex; //flex开关，要用就得写
			flex-direction: row;
			justify-content: center;
			align-items: center;

			span {
				display: inline-block; //行内样式开关
				margin: 0.2rem 0.5rem;
			}
		}

		.rightBox {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btu {
				color: blue;

			}
		}
	}


}
</style>
